  
<!-- 详情 -->
<template>
  <div class="detail">
    <div class="detail_title ">
      <div class="df jc-sb w100 ai-c">
        <div style="white-space: nowrap;padding-left: 20px;box-sizing:border-box;" class="df-c">
          <!-- v-if="system&& system.roles.includes('superadmin')" -->
          <lay-button v-if="system&& system.roles.includes('superadmin') && isEditFull == '1'" size="sm" type="primary" @click="edit_msg">{{ editBtn?'完成':'修改填写信息' }}</lay-button>
          <!-- <span>{{ system.roles }}</span> -->
        </div>
        <h1>{{ '单点评吸详情' }}</h1><lay-button size="sm" @click="close">关闭</lay-button>
      </div>

    </div>

    <div class="detail_content" >

      <div>

        <div class="detail_tabs">
          <el-scrollbar style="width:  '100%' ;white-space: nowrap;background:'#fff' ">
            <ul class="df" style="height:45px;background-color: #fff;width: 100%;">
              <li v-for="(item, index) in dataKey2" :key="index" style="padding:0 6px;cursor: pointer;" class="df jcc ai-c" @click="tab_change(item.label,item.status)">
                <span
                  :style="{color:item.status=='1'?'#1e9fff':'red',padding:'8px 16px','border-bottom':`${tabCurrent==item.label?'2px solid ':''}`,'border-color':`${item.status=='1'?'#1e9fff':'red'}`}">{{item.label}}</span>
              </li>
            </ul>
          </el-scrollbar>
        </div>

        <!-- <lay-tab type="brief" v-model="tabCurrent" @change="tab_change">
          <lay-tab-item :title="item.label" :id="item.label" v-for="(item, index) in dataKey2" :key="index">
            <template #title>
              <div style="background-color: #fff;width: 100%;">
                <span :style="{color:item.status=='1'?'#1e9fff':'red'}">{{item.label}}</span>

              </div>
            </template>
          </lay-tab-item>

          <div v-for="(item, index) in dataKey2" :key="index"> <span :style="{color:item.status=='1'?'#1e9fff':'red'}">{{item.label}}</span></div>

        </lay-tab> -->

        <lay-scroll height="94%" thumbColor="#f5f5f5">
          <lay-container>

            <table>
              <thead>
                <tr>
                  <th colspan="2">项目</th>
                  <th colspan="3">光泽</th>
                  <th colspan="3">香气</th>
                  <th colspan="3">协调</th>
                  <th colspan="3">杂气</th>
                  <th colspan="3">刺激性</th>
                  <th colspan="3">余味</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tbody style="width: 100%;min-height: 100%;">
                <tr>
                  <td rowspan="2">样品编号</td>
                  <td rowspan="2">牌别</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td rowspan="2">合计</td>
                  <td rowspan="3">均值</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>4</td>
                  <td>3</td>
                  <td>32</td>
                  <td>28</td>
                  <td>24</td>
                  <td>6</td>
                  <td>5</td>
                  <td>4</td>
                  <td>12</td>
                  <td>10</td>
                  <td>8</td>
                  <td>20</td>
                  <td>17</td>
                  <td>15</td>
                  <td>25</td>
                  <td>22</td>
                  <td>20</td>
                </tr>

                <template v-for="item in tableData" :key="item.id">
                  <tr v-if="item.number === '标样'">
                    <td>{{ item.number }}</td>
                    <td>{{ item.smokeModel }}</td>
                    <td colspan="3">
                      {{ is_NaN (item.smokeGloss) }}

                    </td>
                    <td colspan="3">
                      {{ is_NaN (item.smokeAroma) }}

                    </td>
                    <td colspan="3">
                      {{ is_NaN (item.smokeHarmony) }}

                    </td>
                    <td colspan="3">
                      {{ is_NaN (item.smokeImpure) }}

                    </td>
                    <td colspan="3">
                      {{ is_NaN (item.smokeThrill) }}

                    </td>
                    <td colspan="3">
                      {{ is_NaN (item.smokeAftertaste) }}

                    </td>
                    <td colspan="1">
                      {{ is_NaN (item.smokeTotal) }}

                    </td>
 
                  </tr>
                </template>
                <template v-for="(item,index) in tableData" :key="item.id">
                  <tr v-if="item.number !== '标样'">
                    <td>{{ item.number }}</td>
                    <td>{{ item.smokeModel }}</td>
                    <td colspan="3">
                      <!-- {{ item.smokeGloss }} -->
                      <el-input @blur="inp_blue(item, 'smokeGloss')" v-if="editBtn" v-model="item.smokeGloss" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeGloss)}} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeAroma }} -->
                      <el-input @blur="inp_blue(item, 'smokeAroma')" v-if="editBtn" v-model="item.smokeAroma" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeAroma)}} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeHarmony }} -->
                      <el-input @blur="inp_blue(item, 'smokeHarmony')" v-if="editBtn" v-model="item.smokeHarmony" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else>{{is_NaN(item.smokeHarmony)}} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeImpure }} -->
                      <el-input @blur="inp_blue(item, 'smokeImpure')" v-if="editBtn" v-model="item.smokeImpure" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else>{{is_NaN(item.smokeImpure)}} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeThrill }} -->
                      <el-input @blur="inp_blue(item, 'smokeThrill')" v-if="editBtn" v-model="item.smokeThrill" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else>{{is_NaN(item.smokeThrill)}} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeAftertaste }} -->
                      <el-input @blur="inp_blue(item, 'smokeAftertaste')" v-if="editBtn" v-model="item.smokeAftertaste" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else>{{is_NaN(item.smokeAftertaste)}} </div>
                    </td>
                    <td colspan="1">
                      <div> {{is_NaN(item.smokeTotal)}} </div>
                    </td>

                    <td>
                      <div>
                        <span v-if="item.workStatus =='1'"> {{ isNaN(getMean(item.smokeModel))? '计算中' :getMean(item.smokeModel)}}</span>
                        <span v-else>-</span>
                      </div>
                    </td>
                  </tr>
                </template>
              </tbody>
            </table>

          </lay-container>
        </lay-scroll>

      </div>

      <!-- <lay-table :columns="columns7" :data-source="tableData" :span-method="spanMethod7"></lay-table> -->

      <!-- <div v-else>
        <lay-empty description="暂无数据"></lay-empty>
      </div> -->
    </div>

  </div>
</template>
  
  <script setup lang="ts">
import http from "@/http";
import { layer } from "@layui/layui-vue";
import somkeTop from "@/components/somkeTop.vue";
import { onMounted, ref, onBeforeUnmount } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterStore } from "@/current";

import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3

const store = useCounterStore();
const { system } = storeToRefs(store); //  数据

const router = useRouter();
const route = useRoute();
const meetingId = ref(route.query.id);
const meetingStatus = ref(route.query.status);

const is_NaN = (num) => {
  let result: any = parseFloat(num);
  result = isNaN(result) ? "" : result.toFixed(1);

  return result;
};
// 修改前的数据
let oldList: Array<any> = [];

const top_list = ref([
  {
    name: "单位(部门)",
    content: "许昌卷烟厂",
    id: 1,
  },
  {
    name: "时间",
    content: new Date().toLocaleString(),
    id: 2,
  },
  {
    name: "编号",
    content: "Q/HNZY 101.3 001-15",
    id: 3,
  },
]);

const columns7 = [
  {
    title: "编号",
    width: "80px",
    key: "id",
  },
  {
    title: "名称",
    width: "100px",
    key: "name",
  },
  {
    title: "性别",
    width: "100px",
    key: "sex",
  },
  {
    title: "年龄",
    width: "100px",
    key: "age",
  },
  {
    title: "城市",
    width: "100px",
    key: "city",
  },
  {
    title: "签名",
    width: "240px",
    key: "remark",
  },
];

const spanMethod7 = (row, column, rowIndex, columnIndex) => {};

// 实时刷新页面数据
const isStartInter = ref(false);
const timer = ref<any>(null);
onMounted(() => {
  get_list();

  startTimer();
});
const getMean = (e) => {
  console.log(info.value);

  let num = 0;
  let length = 0;
  Object.keys(info.value).forEach((item) => {
    console.log(info.value[item]);
    info.value[item].forEach((ele) => {
      if (ele.smokeModel == e && ele.workStatus == "1") {
        num += ele.smokeTotal;
        length += 1;
      }
    });
  });

  return (num / length).toFixed(1);
};

const startTimer = () => {
  if (meetingStatus.value == "2") {
    return false;
  }
  timer.value = setInterval(() => {
    isStartInter.value = true;
    get_list();
  }, 3000);
};
 
onBeforeUnmount(() => {
  clearInterval(timer.value);
});

const isEditFull = ref();
// 选项卡绑定
const tabCurrent = ref("");
// 选项卡切换事件 
const tab_change = (e, status) => {
  
  console.log(editBtn.value);
  if(editBtn.value){
    layer.msg('修改状态不能切换',{icon:2})
    return false
  }

 
  console.log(e); 
  console.log(status);
  isEditFull.value = status;

  tabCurrent.value = e;
  console.log(info.value);
  tableData.value = info.value[e];
  oldList = JSON.parse(JSON.stringify(info.value[e]));
};
const tableData = ref<any>([]);
const info = ref([]);
// key 值数组
const dataKey = ref<string[]>([]);
const dataKey2 = ref<string[]>([]);

const get_list = async () => {
  // dataKey2.value  =[]
  const res = await http.corsApi(`/smokeMeeting/monthlyDetails/${meetingId.value}`, "get", {});
  console.log(res);
  info.value = res.data;
  console.log(Object.keys(res.data));

  if (res.data) {
    try {
      dataKey.value = Object.keys(res.data);

      let arr2: any = [];
      dataKey.value.forEach((item) => {
        arr2.push({ label: item, status: res.data[item][0].workStatus || 0 });
      });

      if (arr2 && arr2.length > 0) {
        dataKey2.value = arr2;
      }

      // 判断是否是第一次进入页面   防止定时器刷新  更新第一个tab
      if (!isStartInter.value || tabCurrent.value == "") {
        tabCurrent.value = dataKey.value[0];
        isEditFull.value = dataKey2.value[0].status;
      } 
      tableData.value = res.data[tabCurrent.value];
      oldList = JSON.parse(JSON.stringify(res.data[tabCurrent.value]));
    } catch (err) {
      console.log(err);
    }
  }
  

  console.log(dataKey.value);
  console.log(dataKey2.value);
  console.log(tableData.value);
  console.log(tableData.value[0].workStatus);

  console.log(info.value);
};

// 修改填写信息
const editBtn = ref(false);
const edit_msg = () => {
  editBtn.value = !editBtn.value;
  console.log(editBtn.value);
  if (editBtn.value) {
    clearInterval(timer.value);
  } else {
    startTimer();
  }
};

const dicts: Array<any> = [
  { title: "光泽", key: "smokeGloss", len: 0.5, area: [0, 5] },
  { title: "香气", key: "smokeAroma", len: 0.5, area: [0, 32] }, 
  { title: "谐调", key: "smokeHarmony", len: 0.5, area: [0, 6] },
  { title: "杂气", key: "smokeImpure", len: 0.5, area: [0, 12] },
  { title: "刺激性", key: "smokeThrill", len: 0.5, area: [0, 20] },
  { title: "余味", key: "smokeAftertaste", len: 0.5, area: [0, 25] },
];
async function inp_blue(row: any, key: string) {
  console.log(row, key);
  let loop = false;
  let tipText = `修改失败，字段值不能为空`;
  let dict = dicts.find((ele) => {
    return ele.key == key;
  });
  let value = row[key];
  if (dict && dict.len) {
    value = (value || 0) * 1;
  }
  if (!value) {
    loop = true;
    tipText = `修改失败，${dict.title || ""}字段值只能为数字`;
  } else {
    if (dict) {
      let len = (dict.len || 1) * 10;
      let area = dict.area || [0, 100];

      if ((value * 10) % len !== 0 || value < area[0] || value > area[1]) {
        loop = true;
        tipText = `修改失败，${dict.title || ""}步长为${dict.len},取值范围为${area[0]}~${area[1]}`;
      }
    }
  }

  if (loop) {
    let a = oldList.find((ele: any) => {
      return ele.id == row.id;
    });
    if (a) {
      row[key] = a[key];
    }
    row.smokeTotal = getTotal(row);

    return layer.msg(tipText, { icon: 2, time: 1500 });
  }
  row.smokeTotal = getTotal(row);
  // repair0(row);
  // row[key] = repair0(row);

  const res = await http.corsApi("/smokeMeeting/monthly", "put", { ...row });
  console.log(res);
  if (res.data) {
    layer.msg("修改成功", { icon: 1, time: 1500 });
  }

  await get_list();
}

// 缺少0  补0
const repair0 = (row) => {
  let str = "";
  dicts.forEach((ele) => {
    // str = row[ele.key].toFixed(1);
    // console.log(row[ele.key]);
    // let str = row[ele.key].toString()
    // let isDot = str.lastIndexOf(".") !== -1 && str.lastIndexOf(".") !== 0;
    // console.log(isDot);
    // if(!isDot){
    // }
  });

  return str;
};

function getTotal(form: any) {
  let total = 0;
  dicts.forEach((ele) => {
    let value = (form[ele.key] || 0) * 1;
    total += value;
  });
  return total.toFixed(1);
}

// 关闭
const close = () => {
  router.go(-1);
  //   router.push("/smokePanel/metting");
};
</script>
  
<style scoped lang="scss">
.detail {
  width: 100%;
  height: calc(100% - 42px);
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  &_title {
    width: 100%;
    padding: 15px 15px 20px 0;
    box-sizing: border-box;
    background-color: #fff;
    h1 {
      font-size: 20px;
    }
  }
  &_content {
    width: 100%;
    height: calc(100% - 120px);
    > div {
      width: 90%;
      margin: 15px auto 0px;
      height: 100%;
      // background-color: #fff;
      table {
        width: 100%;
        text-align: center;
        background-color: #fff;
        th {
          padding: 8px;
          box-sizing: border-box;
          border: 1px solid #f5f5f5;
        }
        tr {
          td {
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #f5f5f5;
          }
        }
      }
    }
  }
}

.layui-container {
  padding: 0;
}

.layui-tab {
  margin: 0;
  background-color: #fff;
  :deep(.layui-tab-content) {
    display: none;
  }

  :deep(.layui-tab-title) {
    height: 40px;
    .layui-this {
      // background-color: #b8ddff;
    }
  }
  :deep(.layui-tab-title li) {
    line-height: 40px;
    // padding: 0 12px;
    border-bottom: 0 none;
  }
}

.dot {
  display: inline-block;
  background-color: whitesmoke;
  margin-right: 8px;
  border-radius: 50px;
  height: 8px;
  width: 8px;
}
.dot-this {
  background-color: var(--global-primary-color) !important;
}

:deep(.el-scrollbar) {
  background: #fff;
}
</style> 

